{include file="$header" /}
<div class="mk-app-warp">
    <mk-table-header
        keyword-title="用户名、标题、Url、IP关键词搜索"
        @search="searchData($event)"
        date-title="操作时间：">
    </mk-table-header>
    <el-alert
        title="系统日志文件超过一定大小时，会自动清理。"
        type="success"
        :closable="false">
    </el-alert>
    <el-table
        :data="table"
        v-loading="loading">
        <el-table-column type="expand">
            <template slot-scope="props">
                <el-form label-position="left"  label-width="130px">
                    <el-form-item label="POST内容：">
                        <span>{{ props.row.post}}</span>
                    </el-form-item>
                </el-form>
            </template>
        </el-table-column>
        <el-table-column prop="userAccount" label="用户名"></el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="path" label="Url"></el-table-column>
        <el-table-column prop="ip" label="IP"></el-table-column>
        <el-table-column prop="date" label="操作时间"></el-table-column>
    </el-table>
    <el-pagination
        @size-change="pageSizeChange"
        @current-change="pageChange"
        :current-page="search.page"
        :page-size="search.pageSize"
        :page-sizes="pageSizes"
        :total="pageTotal"
        layout="total, sizes, prev, pager, next, jumper"
        background
        hide-on-single-page>
    </el-pagination>
</div>
{include file="$component" /}
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                rows: [],
                table: [],
                search:{
                    date: [],
                    keyword: "",
                    page: 1,
                    pageSize: 20,
                },
                pageSizes: [20, 50, 100, 200, 500, 1000, 3000],
                pageTotal: 0,
                url: "adminUser/log",
                loading: false,
            }
        },
        created () {
            this.getData();
        },
        methods: {
            /**
             * 获取数据
             */
            getData() {
                let self     = this;
                self.loading = true;
                request.post(self.url, self.search, function(res) {
                    self.loading   = false;
                    self.table     = res.data;
                    self.pageTotal = res.count;
                });
            },
            sortChange(v) {
                this.search = Object.assign({}, this.search, {prop: v.prop , order: v.order});
            },
            /**
             * 关键词/日期搜索
             * @param  {Object} value 搜索内容
             */
            searchData(value) {
               this.search = Object.assign({}, this.search, {page: 1, date: value.date, keyword: value.keyword});
            },
            /**
             * 分页数量改变时
             * @param  {Number} val 每页数量
             */
            pageSizeChange(val) {
                this.search = Object.assign({}, this.search, {pageSize: val});
            },
            /**
             * 分页改变时
             * @param  {String} val 当前页
             */
            pageChange(val) {
                this.search = Object.assign({}, this.search, {page: val});
            }
        },
        watch: {
            search() {
                this.getData();
            }
        }
    })
</script>
{include file="$footer" /}